<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import UserJob from '../components/UserJob.vue'
import UserCollect from '../components/UserCollect.vue'
import UserAlbum from '../components/UserAlbum.vue'
import UserLike from '../components/UserLike.vue'
import UserIntroduce from '../components/UserIntroduce.vue'
import { getUser } from '../api/User'
import { getimage } from '../hooks/image'
import { viewCount } from "../hooks/filters"
import { type CountNum } from "../interface/interface "
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
// import { log } from 'console'
export default defineComponent({
  components: {
    UserJob,
    UserCollect,
    UserAlbum,
    UserLike,
    UserIntroduce
  },
  setup() {
    const store = useCounterStore()
    const { idarr, collectlikearr, backpath } = storeToRefs(store)
    // 作为 action 的 increment 可以直接解构
    const { increment, incrementfalse, changepath, collectFuns, uncollectFuns } = store;
    let router = useRouter();
    let route = useRoute();
    let useractive = ref(0);
    let setpath: any;
    let queryarr: any;
    let name: any;
    let result: any;
    // const userpathStore = userPathStore();
    // const { path } = storeToRefs(userpathStore);
    // const { changepath } = userpathStore;
    // changepath(router.options.history.state.back);
    // console.log('changepath', userpathStore.changepath);
    let JobType = '';
    let topath: string = store.backpath;
    let back: any = () => {
      changepath(null);
      console.log('111111111111111112222222222222222', topath)
      if (name == 'value') {
        router.push({
          path: setpath[0],
          query: {
            value: result,
          }
        });
      }
      else if (name == 'active') {
        router.push({
          path: setpath[0],
          query: {
            active: Number(result)
          }
        });
      }
      else if (setpath[0] == '/handwrite') {
        router.push({
          path: setpath[0],

        });
      }
      else {
        router.back();
      }
      // router.go(-3);
    }
    let findClass: any = () => {
      router.back();
    }
    //用户信息接口
    interface userDesType {
      count: CountNum,
      username: string,
      ip_location: string,
      verify_description: string,
      app_background: string,
      avatar: string,
      occupation: string,
      vip_flag: number,
      id: number
    }
    //用户id
    // let rquid:any=route.query.userid
    let userid: any = route.query.userid;
    console.log(userid);
    let num: any = userid.value;
    console.log(num);


    //用户主页
    let userDes: any = ref<userDesType | null>(null);
    console.log('userid=>', userid);
    //用户作品
    //获取用户主页数据
    let getUserFun = (userid: any) => {
      getUser(userid).then((data) => {
        console.log('用户主页=>', data);
        userDes.value = data.data;
        console.log('用户主页userDes=>', userDes.value);
      })
    }
    // watch(useractive, (userid: number): void => {
    //   console.log(useractive.value);
    //   router.push({ path: '/userdetail', query: { useractive: useractive.value, userid: route.query.userid } })
    // });
    watch(userid, () => {
      getUserFun(userid);
    })

    // watch(userid:any, () => {
    //   console.log("2222222222222用户id变了")
    // })

    onMounted(() => {
      getUserFun(userid);//获取用户信息
      if (backpath.value == null) {
        changepath(router.options.history.state.back)
      };
      topath = backpath.value;
      setpath = topath.split('?');
      console.log(setpath);
      setpath.forEach((item: any) => {
        queryarr = item.split('=')
      });
      console.log('1setpath', setpath);
      console.log('2queryarr', queryarr);
      name = queryarr[0];
      result = queryarr[1];
      result = decodeURIComponent(result);
    })
    
    if (route.query.useractive == undefined) {
      useractive.value = 0;
    } else {
      useractive.value = Number(route.query.useractive);
    };
    let token: any = ref(window.localStorage.getItem("userId"))
    console.log(token.value);




    // 点击粉丝跳转页面
  let tolikerouter=()=>{
    console.log(111);
    router.push({
      path: '/mylikefans',
      query:{
        userid:route.query.userid

      }
    })
    
  }
  // 点击关注跳转页面
  let toattentionrouter=()=>{
    console.log(111);
    router.push({
      path: '/myattention',
      query:{
        userid:route.query.userid

      }
    })
    
  }
    return {
      back,
      findClass,
      useractive,
      getUserFun,
      userDes,
      getimage,
      viewCount,
      tolikerouter,
      toattentionrouter,
      idarr,
      increment,
      incrementfalse,
      collectFuns,
      uncollectFuns,
      token,
      userid,
      // changepath
    }
  }
})
</script>
<template>
  <div class="userdetail" v-if="userDes">
    <div class="bg">
      <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
      <img v-if="userDes.app_background != ''" :src="getimage(userDes.app_background)+'?param=5y5'" alt="" />
      <img v-else
        src="https://images.weserv.nl/?url=https://oss-xpc6.xpccdn.com/user_app_background/D3dBWn4qdK8JJrc7r6xF0ffXJxP1ugj9mW8Nfm86.jpeg"
        alt="">
    </div>
    <div class="userdes">
      <!-- 顶部标签 -->
      <div class="desbar">
        <span class="iconfont icon-xiangzuojiantou" @click="back"> </span>
        <span class="iconfont icon-gengduo1"> </span>
      </div>
      <!-- 用户头像 -->
      <div class="userimg">
        <img :src="getimage(userDes.avatar)" alt="" />
        <div class="smalllogo" v-if="userDes.vip_flag == 1" style="background-color: #fff;">
          <img src="../assets/images/177会员、vip.png" alt="" />
        </div>
      </div>
      <!-- 用户姓名 -->
      <div class="name">{{ userDes.username }}</div>
      <!-- 用户标签 -->
      <div class="usertag">{{ userDes.occupation }} · {{ userDes.ip_location }}</div>
      <!-- 用户认证 -->
      <div class="authentication">新片场认证创作人</div>
      <!-- 用户的简介 -->
      <div class="job">{{ userDes.verify_description }}</div>
      <!-- 用户的关注粉丝与人气 -->
      <div class="bottom">
        <div class="user-count">
          <div class="people">
            <span>{{ viewCount(userDes.count.count_popularity) }}</span>
            <p>人气</p>
          </div>
          <div class="fans" @click="tolikerouter">
            <span>{{ viewCount(userDes.count.count_follower) }}</span>
            <p>粉丝</p>
          </div>
          <div class="people" @click="toattentionrouter">
            <span>{{ viewCount(userDes.count.count_followee) }}</span>
            <p>关注</p>
          </div>
        </div>
        <div class="button" v-if="token != userid">
          <span @click.stop="increment(userDes.id)" v-if="!idarr.includes(userDes.id)">关注</span>
          <span v-else @click.stop="incrementfalse(userDes.id)">已关注</span>
        </div>
        <div class="button" v-else>
          <span style="background-color: transparent;"></span>
        </div>
      </div>
    </div>
    <div class="null"></div>
    <!-- 用户作品列表 -->
    <div class="usertab">
      <van-tabs v-model:active="useractive" color="#e7281d" animated title-active-color="#e14a3c"
        title-inactive-color="#252525" line-width="24">
        <van-tab title="作品"><user-job :useractive="0"></user-job></van-tab>
        <van-tab title="专辑"><user-album :useractive="1"></user-album></van-tab>
        <van-tab title="喜欢"><user-like :useractive="2"></user-like></van-tab>
        <van-tab title="资料"><user-introduce :useractive="3"></user-introduce></van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.userdetail {
  position: relative;
}

.bg {
  position: absolute;
  // z-index:10;
  width: 100%;
  height: 320px;

  img {
    width: 100%;
    height: 320px;
  }
}

.null {
  width: 100%;
  height: 320px;
}

.userdes {
  z-index: 100;
  position: absolute;
  padding: 0 18px;
  width: 100%;
  box-sizing: border-box;

  .desbar {
    display: flex;
    line-height: 44px;
    // position: fixed;
    z-index: 10;
    // top: 0;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    justify-content: space-between;

    span {
      font-size: 20px;
      font-weight: 600;
    }

    h2 {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;

      // margin-left: 50px;
    }
  }

  .userimg {
    position: relative;
    margin-top: 30px;
    display: flex;

    img {
      width: 54px;
      height: 54px;
      border-radius: 50%;
    }

    .smalllogo {
      position: absolute;
      top: 35px;
      left: 40px;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgb(255, 255, 255);
      border-radius: 50%;

      img {
        width: 16px;
        height: 16px;
        border-radius: 50%;
      }
    }
  }

  .name {
    font-size: 20px;
    margin-top: 15px;
    color: #fff;
    line-height: 32px;
  }

  .usertag {
    font-size: 12px;
    color: rgba(224, 222, 221, 0.8);
    line-height: 24px;
  }

  .authentication {
    font-size: 12px;
    color: rgba(224, 222, 221, 0.8);
    line-height: 21px;
  }

  .job {
    font-size: 12px;
    color: rgba(224, 222, 221, 0.8);
    line-height: 21px;
  }

  .bottom {
    display: flex;
    align-items: center;
    margin-top: 29px;
    width: 100%;
    justify-content: space-between;

    .user-count {
      display: flex;
      flex: 1;
      margin-right: 25px;

      &>div {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
        width: 33%;

        p {
          color: #b4a9a8;
          font-size: 12px;
          line-height: 24px;
        }

        .span {
          line-height: 25px;
        }
      }
    }

    .button {
      width: 78px;
      margin-left: 65px;
      //   padding: 0 19px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      text-align: center;

      p {
        width: 77px;
        height: 27px;
        color: #000;
        background-color: #fff;
        border-radius: 20px;
        font-size: 14px;
        text-align: center;
        line-height: 27px;
      }

      span {
        width: 77px;
        height: 27px;
        display: inline-block;
        color: #fff;
        background-color: #e54c3c;
        font-size: 14px;
        border-radius: 13px;
        text-align: center;
        line-height: 27px;
      }
    }
  }
}
</style>